import React, { useCallback, useState, useRef } from "react";
import { Link, Route } from "react-router-dom";
import style from "../../style/WarehouseAdd.module.scss";
import { Input, Select, Popconfirm, Button, message, Switch } from "antd";
import { renderRoutes } from "react-router-config";
import { addwarehouse } from "../../api/warehouse";

function WarehouseAddContent() {
  const onChangeCity = useCallback((value) => {
    setcity(value);
    // console.log(`${value}`);
  }, []);
  //城市选择器中选择的选项
  const onSearchCity = useCallback((value) => {
    console.log(value);
    setcity(value);
  }, []);
  //城市选择器中搜索的文字
  const onChangeArea = useCallback((value) => {
    setaaaa(value);
    // console.log(`${value}`);
  }, []);
  //区域选择器中选择的选项
  const onSearchArea = useCallback((value) => {
    console.log(value);
  }, []);
  //区域选择器中搜索的文字
  const [open, setOpen] = useState(false);
  const [condition, setCondition] = useState(true);
  const [name, setname] = useState(""); //仓库名称
  const [address, setaddress] = useState(""); //仓库地址
  const [city, setcity] = useState(""); //所在城市
  const [aaaa, setaaaa] = useState(""); //所在区域
  const [area, setarea] = useState(""); //仓库面积

  const nameRef = useRef(); //仓库名称
  const addressRef = useRef(); //仓库地址
  const areaRef = useRef(); //仓库面积

  const GoBack = useCallback(() => {
    window.history.go(-1);
  }, []);

  const SaveAction = useCallback(() => {
    fetchData(name, address, area, city, aaaa);
    console.log(name, address, area, city, aaaa);
  }, [name, address, area, city, aaaa]);
  const fetchData = async () => {
    try {
      const data = await addwarehouse({
        name: name,
        address: address,
        area: area,
        city: city,
        region: aaaa,
      });
      console.log(data.data.code);
      if (data.data.code === 200) {
        alert("添加成功");
        GoBack();
      }
    } catch (error) {
      console.log(error);
    }
  };

  const NameAction = useCallback(() => {
    setname(nameRef.current.input.value);
  }, []);

  const AddressAction = useCallback(() => {
    setaddress(addressRef.current.input.value);
  }, []);
  const AreaAction = useCallback(() => {
    setarea(areaRef.current.input.value);
  }, []);

  return (
    <div className={style.Dashboard}>
      <div className={style.box}>
        <div className="first">
          <p style={{ marginLeft: "20px" }}>
            <label>仓库名称</label>
            <Input
              placeholder=" 仓库名称"
              ref={nameRef}
              onChange={NameAction}
              style={{ width: "160vh", margin: "20px 0px 20px 20px " }}
            />
          </p>
          {/* 仓库名称输入框 */}
          <div className="second" style={{ marginLeft: "20px" }}>
            <label>所在城市</label>
            <Select
              showSearch
              placeholder="所在城市"
              optionFilterProp="children"
              style={{ width: "60vh", margin: "20px 0px 20px 20px " }}
              onChange={onChangeCity}
              onSearch={onSearchCity}
              filterOption={(input, option) =>
                (option?.label ?? "")
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              options={[
                {
                  value: "北京",
                  label: "北京",
                },
                {
                  value: "上海",
                  label: "上海",
                },
                {
                  value: "广州",
                  label: "广州",
                },
                {
                  value: "深圳",
                  label: "深圳",
                },
              ]}
            />
            {/* 所在城市选择框 */}
            <label style={{ marginLeft: "40px" }}>所在区域</label>
            <Select
              showSearch
              placeholder="所在区域"
              optionFilterProp="children"
              style={{ width: "60vh", margin: "20px 0px 20px 20px " }}
              onChange={onChangeArea}
              onSearch={onSearchArea}
              filterOption={(input, option) =>
                (option?.label ?? "")
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              options={[
                {
                  value: "老区",
                  label: "老区",
                },
                {
                  value: "新区",
                  label: "新区",
                },
              ]}
            />
            {/* 所在区域选择框 */}
          </div>
          <div className="thired" style={{ marginLeft: "20px" }}>
            <label>仓库地址</label>
            <Input
              placeholder=" 请输入详细地址"
              onChange={AddressAction}
              ref={addressRef}
              style={{
                width: "160vh",
                height: "20vh",
                margin: "20px 0px 20px 20px ",
              }}
            />
          </div>
          <div className="foured" style={{ marginLeft: "20px" }}>
            <label>仓库面积</label>
            <Input
              ref={areaRef}
              onChange={AreaAction}
              placeholder=" 
              请输入面积（㎡）"
              style={{
                width: "160vh",
                margin: "20px 0px 20px 20px ",
              }}
            />
          </div>
          <Button
            type="primary"
            style={{ backgroundColor: "#666666", marginLeft: "20px" }}
          >
            返回
          </Button>
          <Button style={{ margin: "10px" }} onClick={SaveAction}>
            保存资料
          </Button>
        </div>
        <div></div>
      </div>
    </div>
  );
}

export default function warehouseAdd({ route: { routes } }) {
  return (
    <>
      <Route
        exact
        path="/warehosemanage/warehouseAdd"
        component={WarehouseAddContent}
      />
      {/* 
      <Switch>
        <Route path="/product/manager/add" component={Add} />
      </Switch>
     */}
      {renderRoutes(routes)}
    </>
  );
}
